<template>
  <page-frame class="expand-wait" :goBackPage="goBackPage" :showPageRefresh="showPageRefresh"
    v-model:refresh-loading="pageRefreshLoading" @onRefresh="getDataList()">
    <template #header-title>
      进行中
    </template>
    <div class="main">
      <div class="search-box">
        <page-search></page-search>
      </div>
      <div class="date-selector">
        <div class="date-selected-text">{{ shiftInfo?.date || '2023-02-17' }}</div>
        <div class="task-count">{{ list?.length || 0 }}</div>
      </div>
      <div class="main-task-info">
        <div v-if="list && list.length > 0" class="task-list">
          <div class="task-info-list">
            <!-- system_state : 1 正常 ,反之超時 -->
            <div v-for="(item, i) in list" :key="i" class="info-li" :class="[{ 'info-timeout': item.system_state != 1 }]"
              @click="goDetail(item)">
              <div class="task-name">
                <div class="">
                  JAM-{{ item.id }}
                </div>
              </div>
              <div class="task-tag f-b">
                <div class="tag-item" :class="[`tag-urgent-${item.urgent || '1'}`]">
                  {{ getUrgentValue(item.urgent) }}
                </div>
                <div class="tag-item tag-machine">{{ item.short }}</div>
                <div class="tag-item">{{ item?.contents?.category }}</div>
              </div>
            </div>
          </div>
          <div class="task-line"></div>
        </div>
        <div v-else>
          <!-- 通用错误 -->
          <van-empty description="没有相关信息" />
        </div>
      </div>
      <page-footer v-if="list && list.length > 10" isMainPage> 已经到达底部了 </page-footer>
    </div>
  </page-frame>
</template>

<script>

import { DoingApi } from '@/apis/doing/doing';
import pageBase from '@/views/mixins/page-base';
import pageRefresh from '@/views/mixins/page-refresh'
export default {
  mixins: [pageBase, pageRefresh],
  data() {
    return {
      list: null
    }
  },
  computed: {
    isFormWait() {
      return this.$route.params?.formType === 'wait';
    },
  },
  methods: {
    goBackPage() {
      return this.isFormWait ? this.goBackOrForward(-2, true) : this.goBackOrForward(-1, true);
    },
    getDataList() {
      this.pageRefreshLoading = true;
      DoingApi.getList().then(res => {
        this.pageRefreshLoading = false;
        this.list = res.data;
      }).catch(error => {

      });
    },
    goDetail(item) {
      this.$router.push({
        name: 'going-detail', params: {
          value: this.getParamsString(item)
        }
      });
    },
    getUrgentValue(value) {
      //value 1 2 3
      value = value || 1;
      return ['Default', 'Urgent', 'SOS'][value - 1];
    },
  },
  created() {
    this.getDataList();
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/expand.scss';

.expand-wait {
  .task-info-list {

    .info-li {
      @include task-list-box-info(going);
      @extend .f-b, .box-b, .a-i-c, .p8, .p-t0, .p-b0, .m-b5;
      border-radius: 14px;
      border: 1px solid var(--wait-task-bg-color);

      &::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 8px;
        width: 2px;
        height: 24px;
      }

      .tag-item {
        min-width: 44px;
        text-align: center;
      }

      .tag-machine {
        background: var(--completed-task-tag-bg-color);
        color: var(--completed-task-tag-color);
      }

      @include tag-urgent-color(1);
      @include tag-urgent-color(2);
      @include tag-urgent-color(3);
    }

    .info-timeout {
      border: 1px solid rgba(204, 18, 18, 1)
    }
  }




}
</style>
